<template>
	<van-empty description="暂无发布" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" v-if="list.length==0"/>
	<scroll-view scroll-y="true" style=" height: 100vh;padding-top: 7vh;" @scrolltolower="lowerBottom" v-else refresher-enabled="true"
		:refresher-triggered="truggered" @refresherrefresh="onRestore">
		<view class="meslist" v-for="(item,index) in list" :key="item.userid">
			<mes :title='item.title' :content='item.content' :pic="item.img" :status="item.status" :mesid='item.mesid'>
			</mes>
		</view>
	</scroll-view>

</template>

<script>
	import mes from '@/modul/Aboutme/public_history_mes.vue'
	import { getMypost, getcontent } from '@/store/api.js'
	import {truncateString} from '@/store/constants.js'
	export default {
		mounted() {
			getMypost(1, 200).then(res => {
				const re = JSON.parse(res)
				this.num++
				this.total=re.data.total
				re.data.rows.forEach(item => {
					// const content=getcontent(item.id)
					// console.log(item.content.substring(0,10)+'···')
					this.list.push({
						img: item.posterAvatar,
						title: item.title,
						content: item.content ? truncateString(item.content): '···',
						mesid: item.id,
						status: item.status,
						userid: item.posterId
					})
				})
			}).catch(err => {
				console.log(err)
			})
		},
		components: {
			mes
		},
		data() {
			return {
				num: 1,
				total:0,
				list: [],
				truggered:false
			}
		},
		methods: {
			onRestore(){
				this.truggered=true
				this.num= 1
				this.total=0
				this.list= []
				getMypost(1, 200).then(res => {
					const re = JSON.parse(res)
					this.num++
					this.total=re.data.total
					re.data.rows.forEach(item => {
						// const content=getcontent(item.id)
						// console.log(item.content.substring(0,10)+'···')
						this.list.push({
							img: item.posterAvatar,
							title: item.title,
							content: item.content ? truncateString(item.content): '···',
							mesid: item.id,
							status: item.status,
							userid: item.posterId
						})
					})
				}).catch(err => {
					console.log(err)
				})
				setTimeout(()=>{
					this.truggered=false
				},1000)
			},
			lowerBottom() {
				if (this.total>this.list.length) {
					getMypost(this.num, 20).then(res => {
						res.data.data.rows.foreach(item => {
							this.list.push({
								img: item.postAvatar,
								title: item.title,
								content: '',
								mesid: item.id,
								status: item.status
							})
						})
					}).catch(err => {
						console.log(err)
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.meslist {
		position: relative;
		z-index: 5;
	}
</style>